/**
 * Created by user on 2018/3/20.
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import GlobalTitle from '../globalTitle'
import QaContent from './qaContent'
import QaFooter from './qaFooter'
import LinkMask from './linkMask'
import BigImageMask from './bigImageMask'
import Toast from '../Toast'

class QaScreen extends Component {
  renderLinkMask() {
    const { show_link } = this.props
    return show_link ? <LinkMask /> : null
  }
  render() {
    const { color_theme } = this.props
    const _className = color_theme === 'red' ? 'qa_title red' : 'qa_title'
    return (
      <div>
        <GlobalTitle />
        <div className="qa_screen">
          <div className="qa_left"></div>
          <div className="qa_right">
            <div className={_className}>课后Q&A进行中...</div>
            <QaContent />
            <Toast type="qa"/>
            <QaFooter />
            {this.renderLinkMask()}
            <BigImageMask />
          </div>
        </div>
      </div>
    )
  }
}
const mapStateToProps = (state) => {
  return {
    color_theme: state.MainScreenState.info.color_theme,
    show_link: state.QaState.show_link
  }
}
export default connect(mapStateToProps)(QaScreen)
